<route lang="json5" type="page">
{
	style: {
		navigationStyle: 'custom',
		navigationBarTitleText: '班级动态',
	},
}
</route>

<template>
	<view class="page-bookrack">
		<fly-navbar backgroundColor="#fff" leftText="班级动态" fixed />
		<view class="w-full box-border" :style="{ height: contentHeight + 'rpx' }">
			<scroll-view
				class="w-full h-full box-border"
				scroll-y
				v-if="thisPage === 1 && list.length"
				@scrolltolower="scrolltolower"
			>
				<view class="w-full py-[38rpx]">
					<view class="w-full px-4 box-border mb-3 last:mb-0" v-for="item in list" :key="item.id">
						<view
							class="rounded-[30rpx] relative px-3 py-3 w-full overflow-hidden box-border flex justify-between flex-col"
							style="background: #f6f6f8"
						>
							<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 4">
								我完成了
								<text
									class="text-[#34A4E2]"
									@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
									>《{{ item.remark }}》</text
								>
								测试闯关
								<text
									v-if="item.object_name"
									class="text-[#34A4E2]"
									@tap="toLink('/pages-book/details/index?id=' + item.object_id)"
									>《{{ item.object_name }}》</text
								>
								, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
								>积分, 你也来闯关吧!
							</view>
							<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 5">
								我已经读完了
								<text class="text-[#34A4E2]">《{{ item.remark }}》</text>
								, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
								>积分, 你也来试试吧!
							</view>
							<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 6">
								我已经完成了
								<text
									class="text-[#34A4E2]"
									@tap="toLink('/pages-plan/details/index?id=' + item.object_id)"
									>班级共读计划: “{{ item.remark }}”</text
								>
								, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
								>积分, 你也来试试吧!
							</view>
							<view class="w-full text-[26rpx] text-[#303030]" v-if="item.model === 7">
								我已经完成了
								<text
									class="text-[#34A4E2]"
									@tap="toLink('/pages-plan/details/index?id=' + item.object_id)"
									>倍阅共读计划: “{{ item.remark }}”</text
								>
								, 获得了<text class="text-[#34A4E2]">{{ item.integral }}</text
								>积分, 你也来试试吧!
							</view>
							<view class="w-full flex justify-between items-center mt-6">
								<view class="flex items-center">
									<image
										:src="item.avatar || baseImg + '/user-default.png'"
										class="w-[48rpx] h-[48rpx] rounded-[50%] mr-1"
									></image>
									<text class="text-[#303030] text-[28rpx]">{{ item.student_name }}</text>
								</view>
								<text class="text-[#ABABAB] text-[25rpx]">{{ item.created_at }}</text>
							</view>
						</view>
					</view>
				</view>
			</scroll-view>
			<no-page
				v-if="thisPage === 0 || (thisPage === 1 && !list.length)"
				height="100%"
				:type="thisPage === 0 ? 'btn' : 'msg'"
				:title="title"
				@click="retry"
			></no-page>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { storeToRefs } from 'pinia';
import { systemInfo } from '@/utils/getSystemInfo';
import { getClassDynamic } from '@/service/class';
import { useUserStore } from '@/store';

const baseImg = ref(import.meta.env.VITE_STATIC_IMAGE);
const { contentHeight } = systemInfo();
const userStore = useUserStore();
const { userInfo } = storeToRefs(userStore);
const title = ref('');
const thisPage = ref(-1);
const page = ref({ number: 1, size: 10 });
const hasMore = ref(true);
const list = ref([]);

onShow(() => {
	getList();
});

const scrolltolower = () => {
	if (!hasMore.value) return;
	page.value.number++;
	getList();
};

const getList = async () => {
	uni.showLoading({ title: '加载中...' });
	try {
		const res = await getClassDynamic({
			id: userInfo.value.class_id,
			page: page.value.number,
			page_size: page.value.size,
		});
		uni.hideLoading();
		if (res.status_code === 200 && res.data) {
			thisPage.value = 1;
			list.value = page.value.number === 1 ? res.data.list : [...list.value, ...res.data.list];
			if (res.data.list.length < page.value.size) {
				hasMore.value = false;
			}
			if (!list.value.length) {
				title.value = '暂无数据';
			}
		} else {
			thisPage.value = 0;
			title.value = res.message;
		}
	} catch (error) {
		uni.hideLoading();
		thisPage.value = 0;
		title.value = '服务器异常';
	}
};

const retry = () => {
	hasMore.value = true;
	page.value = { number: 1, size: 10 };
	getList();
};

const toLink = url => {
	if (!url) return;
	uni.navigateTo({
		url,
	});
};
</script>

<style lang="scss">
page {
	background: #fff;
}
</style>
<style lang="scss" scoped>
.page-bookrack {
	width: 100%;
	height: 100vh;
}

.plan-item {
	box-shadow:
		0rpx 0rpx 3rpx 0rpx rgb(0 0 0 / 3%),
		0rpx 5rpx 21rpx 0rpx rgb(0 0 0 / 7%);
}
</style>
